<template>
	<!-- 9.9专区 -->
	<view class="activity-wrap u-p-x-20 u-p-b-20  u-m-b-10 seckill-card" style="background-color: #c4251f ;">
		<view class="template-box">
			<!-- <image class="imagestyle" mode="widthFix" :src="themeimg" ></image> -->
			<image class="imagestyle" src="https://image.hzwltb69.com/app/date/2023/market01.jpg" mode="widthFix"></image>
			<image class="imagestyle" src="https://image.hzwltb69.com/app/date/2023/market02.jpg" mode="widthFix"></image>
		</view>
		<!--b-->
		<view class="big-goods  u-flex u-p-20 u-col-top u-m-b-16" v-for="item in goodsList" :key="item.id"
			@tap="jump('/pages/goods/detail', { id: item.id })">
				<image class="goods-img" :src="item.img" ></image>
				<view class=" card-right u-m-l-20 u-flex-col u-row-between">
					<view class="">
						<view class="goods-title u-m-t-10 u-m-b-10">
							{{ item.name }}
						</view>
						<view class="subtitle-text u-m-b-10">{{ item.subtitle?item.subtitle:"" }}</view>
					</view>
					<view class="u-flex u-m-y-10 u-row-between">
					<!-- <view class="progress-text">补贴￥{{ ((item.price-item.cost)* item.rebate/100).toFixed(2)}}</view> -->
					</view>
<!-- 					<view class="buy-num">
						<view class="num-icon">
							<image src="https://image.hzwltb69.com/app/date/2023/nineuser.png" mode="aspectFill"></image>
						</view>
						<view class="">
							{{item.paySales}}人已下单
						</view>
					</view> -->
					<view class=" u-flex u-row-between u-col-center shop-box">
						<view class="u-flex u-col-bottom">
							<view class="price u-m-r-10">
								￥
								<span style="font-size: 35rpx;">{{ item.price }}</span>
								</view>
<!-- 							<view class="origin-price">
							</view> -->
						</view>
						<button class="u-reset-button buy-btn">立&nbsp;即&nbsp;购&nbsp;买&nbsp;</button>
					</view>
				</view>
		</view>
		<view class="x-c" style="width: 100%;">
			<u-loadmore height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
		<view class="upward" v-if="isShow"	@click="pullTop()"> <u-icon name="arrow-upward"	color="#999" size="28"> </u-icon></view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isShow: false,
				goodsList: [],
				themeimg: '',
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				page: 0
			};
		},
		computed: {},
		created() {
			this.getGoodsList()
		},
		onReachBottom() {
			this.page+=1
			this.getGoodsList()
		},
		onPageScroll(e) {
			if (e.scrollTop > 500) {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		methods: {
			pullTop() {
				uni.pageScrollTo({
					scrollTop: 0, //滚动到距离顶部为0
					duration: 500 //滚动时长
				})
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			// 获取秒杀商品
			getGoodsList() {
				let that = this;
				that.$http('goods.liveList', {
					page: that.page,
					size: 10
				}).then(res => {
					// that.themeimg ?  that.themeimg : that.themeimg = res.themeimg
					if(res.productList.length > 0){
						that.goodsList.length == 0 ? that.goodsList = res.productList : that.goodsList = that.goodsList.concat(res.productList)
						if(res.theme.length < 10){
							this.onEnd = true
							this.loadStatus = 'nomore'
						}else{
							this.loadStatus = 'loadmore'
						}
					}else{
						that.onEnd = true
						that.loadStatus = "nomore"
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.seckill-card {
		// background: linear-gradient(#faf5e9 20%, #fff 30%, #fff 100%);
	}

	.seckill-title {
		background: url($IMG_URL+'/imgs/tag/seckill_title_bg.png') no-repeat;
		background-position: center top;
		background-size: 100% auto;
	}

	.activity-wrap {

		min-height: 100vh;

		.title-box {
			.title-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFF;
			}

			.more-box {
				.more-text {
					font-size: 22rpx;
					font-weight: 500;
					color: #333333;
				}

				.more-icon {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}

		.scroll-box,
		.goods-box {
			height: 380rpx;
			width: 100%;
		}
	}

	// 小商品卡片
	.min-goods {
		width: 220rpx;
		height: 380rpx;
		background: #fff7f7;
		box-shadow: 0px 7rpx 7rpx 0px rgba(255, 80, 94, 0.32);
		border-radius: 10rpx;

		.img-box {
			width: 220rpx;
			height: 220rpx;
			overflow: hidden;
			position: relative;
			border-radius: 10rpx 10rpx 0 0;

			.img {
				width: 220rpx;
				height: 220rpx;
				background-color: #ccc;
			}
		}

		.mgoods-card-bottom {
			height: 160rpx;
			background: url($IMG_URL+'/imgs/tag/seckill_goods_bg.png') no-repeat;
			background-position: bottom center;
			background-size: 100% 100%;
		}

		.goods-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
			line-height: 26rpx;
		}

		.price-box {
			.price {
				font-size: 30rpx;
				font-weight: 500;
				color: #f7dbb2;

				&::before {
					font-size: 24rpx;
				}
			}

			.original-price {
				font-size: 20rpx;
				font-weight: 500;
				text-decoration: line-through;
				color: #c4c4c4;
			}
		}
	}

	// 大商品卡片
	.big-goods {
		width: 710rpx;
		min-height: 260rpx;
		background: #ffffff;
		box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
		border-radius: 20rpx;
		position: relative;
		background: url('https://image.hzwltb69.com/app/date/2023/market03.png') no-repeat;
		background-size: 100% 100%;
		.buy-num{
			width: 200rpx;
			height: 40rpx;
			border-radius: 25rpx;
			border: 1rpx solid #f42d41;
			color: #f42d41;
			font-size: 24rpx;
			line-height: 40rpx;
			display: flex;
			position: relative;
			padding-left: 50rpx;
			.num-icon{
				position: absolute;
				left: -1rpx;
				top:0;
				width: 40rpx;
				height: 100%;
				border-radius: 25rpx;
				// border: 1rpx solid #f42d41;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.shop-box{
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			width: 440rpx
		}
		.goods-img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 10rpx;
			border: 10rpx #ff8d6a solid;
		}

		.card-right {
			width: 330rpx !important;
			height: 100%;
		}

		.goods-title {
			font-size: 30rpx;
			// font-weight: 600;
			height: 80rpx;
			width: 400rpx;
			color: #f7dbb2;
			      display: -webkit-box;
			      overflow: hidden;
			      -webkit-box-orient: vertical;
			      -webkit-line-clamp: 2;
			
			
		}

		.subtitle-text {
			font-size: 22rpx;
			width: 350rpx;
			font-weight: 500;
			color: #f7dbb2;
		}

		.buy-btn {
			// width: 140rpx;
			line-height: 50rpx;
			height: 50rpx;
			background: #f7dbb2;
			border-radius: 35rpx;
			padding: 5rpx 25rpx 5rpx 25rpx;
			font-size: 25rpx;
			font-weight: 600;
			color: #c2241e;
		}

		.progress-text {
			color: #333;
			font-size: 20rpx;
			
			padding: 8rpx;
			border-radius: 10rpx;
			;
			 
		}

		// 价格
		.price {
			color: #f7dbb2;
			font-weight: 600;
			margin-right: 200rpx;
			&::before {

				font-size: 20rpx;
			}
		}

		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;

			&::before {

				font-size: 20rpx;
			}
		}
	}

	.menu-category-box,
	.menu-swiper-box {
		position: relative;
		background: #fff;

		.menu-swiper-item {
			background: #fff;
			height: 100%;
			width: 100%;
		}

		.menu-tab-box {
			.tab-list {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin: 20rpx 0;

				.tab-img {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;

				}

				.tab-text {
					font-size: 26rpx;

				}
			}
		}

		.menu-category-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;

			.category-dot {
				width: 12rpx;
				height: 12rpx;
				background: #eeeeee;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.category-dot-active {
				width: 12rpx;
				height: 12rpx;
				background: #e9b461;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	.detailtitle-active {
		color: #D44C1C;
	}
	.imagestyle {
		border-radius: 1rpx;
		width: 750rpx;
		height: 330rpx;
	}
	::v-deep .u-load-more-wrap .u-line-1{
		color: #f7dbb2 !important;
	}
</style>